import React, { useState } from 'react';
import cardStyle from './index.less';
import { Button, Modal, Toast } from '@douyinfe/semi-ui';
import {
  IconHeartStroked,
  IconLikeHeart,
  IconStar,
  IconStarStroked,
} from '@douyinfe/semi-icons';
import bookmark from '@/api/model/bookmark';
// 书签卡片
const BookMarkCard = (props: any) => {
  const [visible, setvisible] = useState(false);
  const { bookmarkItem }: any = props;
  const [item, setTtem] = useState(bookmarkItem);
  let state = { visible: false, item: bookmarkItem };
  const showDialog = () => {
    setvisible(true);
  };

  const handleOk = () => {
    const { link } = state.item;
    setvisible(false);
    window.open(link);
  };

  const handleCancel = () => {
    setvisible(false);
  };

  const tags = async (state: number) => {
    const { status } = await bookmark.BookmarkHoardTags({
      id: item.id,
      tags: state,
    });
    if (status) {
      setTtem({
        ...item,
        tags: state,
      });
      Toast.success({
        content: state == 1 ? '喜欢成功～' : '取消喜欢成功～',
        duration: 3,
      });
    }
  };

  const hoard = async (state: number) => {
    const { status } = await bookmark.BookmarkHoardTags({
      id: item.id,
      hoard: state,
    });
    if (status) {
      setTtem({
        ...item,
        hoard: state,
      });
      Toast.success({
        content: state == 1 ? '收藏成功～' : '取消收藏成功～',
        duration: 3,
      });
    }
  };

  // const { item }: any = state;
  return (
    <>
      <div
        onClick={showDialog}
        className={[cardStyle.card_container, 'card_container'].join(' ')}
      >
        <h4 className={cardStyle.card_title}>{item.title}</h4>
        <p className={cardStyle.card_expression}>{item.desc}</p>
      </div>
      <Modal
        title={item.title}
        visible={visible}
        onCancel={handleCancel}
        hasCancel={false}
        centered
        className="modalStyle"
        bodyStyle={{ overflow: 'auto' }}
        footer={
          <>
            {item.hoard == 1 ? (
              <Button
                onClick={() => {
                  hoard(0);
                }}
                type="warning"
                icon={<IconStar />}
                aria-label="收藏"
              />
            ) : (
              <Button
                type="warning"
                onClick={() => {
                  hoard(1);
                }}
                icon={<IconStarStroked />}
                aria-label="没有收藏"
              />
            )}
            {item.tags == 1 ? (
              <Button
                onClick={() => {
                  tags(0);
                }}
                type="danger"
                icon={<IconLikeHeart />}
                aria-label="喜欢"
              />
            ) : (
              <Button
                onClick={() => {
                  tags(1);
                }}
                type="danger"
                icon={<IconHeartStroked />}
                aria-label="没有喜欢"
              />
            )}
            <Button onClick={handleOk}>跳转</Button>
          </>
        }
      >
        <p style={{ lineHeight: 1.8 }}>{item.desc}</p>
      </Modal>
    </>
  );
};

export default BookMarkCard;
{
  /*<div className={cardStyle.card_footer}>*/
}
{
  /*  <div className={cardStyle.start}>*/
}
{
  /*    <Space>*/
}
{
  /*      <IconLikeHeart*/
}
{
  /*        className={[cardStyle.icon_style, cardStyle.like].join(' ')}*/
}
{
  /*      />*/
}
{
  /*      <span className={cardStyle.like_collect_num}>11</span>*/
}
{
  /*      <IconStar*/
}
{
  /*        className={[cardStyle.icon_style, cardStyle.collect].join(' ')}*/
}
{
  /*      />*/
}
{
  /*      <span className={cardStyle.like_collect_num}>11</span>*/
}
{
  /*    </Space>*/
}
{
  /*  </div>*/
}
{
  /*  <div className={cardStyle.operation}>*/
}
{
  /*    <Space>*/
}
{
  /*      <Button type='primary' size='small'>*/
}
{
  /*        评论*/
}
{
  /*      </Button>*/
}
{
  /*      <Button type='primary' size='small'>*/
}
{
  /*        详情*/
}
{
  /*      </Button>*/
}
{
  /*    </Space>*/
}
{
  /*  </div>*/
}
{
  /*</div>*/
}
